<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- Child.vue代码 -->
		<template>
			<div class="child">
				<h2>child子组件部分</h2>
				<p>{{message}}</p>
				<button @click="sendMsgToParent">向父组件传值</button>
			</div>
		</template>
		<script src="../vue.min.js"></script>
		<script>
			export default{
				data(){
					return{
						
					}
				},
				props:['message'],
				methods:{
					sendMsgToParent:function(){
						/* 使用自定义事件传递一句话过去 */
						this.$emit("listenToChildEvent","this message from child")
					}
				}
			}
		</script>
		<template>
			<!-- Parent.vue代码 -->
			<div class="hello">
				<!-- 3.调用组件 -->
				<!-- 使用动态绑定进行传值，这样就可以把hello world！传递到子组件中显示了 -->
				<child :message="msg" @listenToChileEvent="showMsgFromChild"></child>
				<!-- 显示子组件传递的数据 -->
				<p>子组件传递的值是:{{childMsg}}</p>
			</div>
		</template>
		<script>
			/* 1.ES6语法导入子组件 */
			import child from "../Child";
			export default{
				data(){
					return {
						msg:"hello world!",
						childMsg:""
					};
				},
				//2.components里面做记录
				components:{
					child
				},
				methods:{
					showMsgFromChild:function(data){
						//data参数就是接收的数据
						//传递过来的数据赋值给childMsg,用于页面显示
						this.childMsg = data;
					}
				}
			};
		</script>
	</body>
</html>
